<template>
  <view class="page"> 
    <commonNav :currentSewLine="currentSewLine.sewingName" :navTitle="navTitle" @backRouter="backToHome" />

    <view class="content">
      <view class="left">
        <view 
          v-for="(data, index) in list" 
          class="leftItem" 
          :class="activeItem.id === data.id ? 'curAcitve' : data.choose ? 'leftItemAcitve' :''"
          :key="data.id"
          @click="() => selectItem(data, index)"
        >
        {{ data.item }}
      </view>

      </view>
      <view class="right">
        <view class="rightTop">
          <image v-if="activeItem.id && activeItem.image" class="deviceImg" :src="activeItem.image"></image>
          <view  v-if="activeItem.id && !activeItem.image" class="deviceImg">暂无图片</view>
          <view class="btns"> 
            <view v-if="!allChoose" class="submitBtn" @click="chooseAll">全选</view>
            <view v-if="allChoose" class="submitBtn" @click="unchooseAll">全不选</view>
            <view v-if="hasChoose" class="submitBtn" @click="submit">完成</view>
          </view>
        </view>
        <view v-if="activeItem.id" class="deviceBase">{{ activeItem.standard }}</view>
      </view>
    </view>
  </view>

</template>

<script>
import commonNav from "@/components/nav/commonNav.vue"
import storage from "@/utils/storage.js"
import { getDeviceDetail, saveMaintenance } from "@/api/deviceMaintenance.js"

export default {
  data() {
    return {
      currentSewLine: storage.get('currentSewLineInfo') || {
        sewingName: '未选择缝制线'
      },
      navTitle: this.$t('home.deviceMaintenance'),
      list: [],
      activeIdx: null,
      activeItem: {},
      allChoose: false,
      hasChoose: false,
      id: '',
      deviceSn: '',
      maintanceItem: [],
    }
  },
  components: {
    commonNav, 
  },
  onLoad(option) {
    console.log(option, 'option');
    this.id = option.id
    this.deviceSn = option.deviceSn
    this.maintanceItem = option.maintanceItem.split(',')
    this.getData()
    // this.list.forEach(item => item.choose = false)
  },
  methods: {
    backToHome() {
      uni.navigateBack()
    },
    selectItem(data, idx) {
      const target = this.list[idx]
      target.choose = !target.choose
      if (target.choose) {
        this.activeItem = data
      } else {
        if (this.activeItem.id && this.activeItem.id === target.id) {
          const t = this.list.find(item => item.choose)
          this.activeItem = t || {} 
        } 
      }
      this.list = [...this.list]
      
    },
    chooseAll() {
      this.list.forEach(item => item.choose = true)
      this.allChoose = true
      this.activeItem = this.list[0]
      this.hasChoose = true
    },
    unchooseAll() {
      this.list.forEach(item => item.choose = false)
      this.allChoose = false
      this.activeItem = {}
      this.hasChoose = false
    },
    async submit() {
      let selects = this.list.filter(item => item.choose)
      selects = selects.map(item => item.id) || []
      let flag
      if (!selects.length) {
        flag = 0
      } else {
        if (selects.length === this.list.length) {
          flag = 2
        }
        if (selects.length !== this.list.length) {
          flag = 1
        }
      }
      
      const params = {
        id: this.id,
        deviceSn: this.deviceSn,
        maintanceItem: selects.join(","),
        maintanceStatus: flag
      }
      console.log(params, 'params');
      try {
        const res = await saveMaintenance(params)
        if (+res.code === 0) {
          uni.showToast({
            title: "操作成功",
            duration: 1000
          })
          setTimeout(() => {
            uni.navigateBack()
          }, 1000)
        } else {
          uni.showToast({
            title: res.msg,
            duration: 1000
          })
        }
      } catch (error) {
        console.log(error);
      }
    },
    async getData() {
      try {
        const { data, code } = await getDeviceDetail({
          id: this.id
        })
        // maintanceList
        if (+code === 0) {
          const { maintanceList } = data
          maintanceList.forEach(item => {
            item.choose = this.maintanceItem.includes(item.id)
          })
          this.list = maintanceList
          this.activeItem = this.list.find(item => item.choose) || {}
        }
      } catch (error) {
        console.log(error);
      }
    }
  },
  watch: {
    // selectType: {
    //   handler() {},
    //   immediate: false
    // }
    list: {
      handler(data) {
        this.hasChoose = data.filter(item => item.choose).length > 0
      },
      immediate: false,
      deep: true
    }
  }
}
</script>

<style lang="less" scoped>
	.page {
    position: relative;
		width: 100%;
		// height: 100vh;
		overflow-x: hidden;
		// box-sizing: border-box;
	}

  .content {
    display: flex;
    padding-top: 131.332rpx;
  }

  .left {
    width: 20%;
    height: calc(100vh - 131.332rpx);
    overflow: auto;
    border-right: 1px solid #E5E5E5;
  }

  .leftItem {
    padding-left: 16px;
    display: flex;
    height: 48px;
    font-size: 20px;
    align-items: center;
    border-bottom: 1px solid #E5E5E5;
  }

  .leftItemAcitve {
    background-color: #aad4fb;
    color: #fff;
  }
  .curAcitve {
    background-color: #1890ff;
    color: #fff;
  }
  .right {
    flex: 1
  }
  .rightTop {
    display: flex;
  }
  .deviceImg {
    margin: 16px 0 0 16px;
    display: block;
    width: 360px;
    height: 360px;
  }
  .deviceBase {
    margin: 16px 16px 0 16px;
    padding: 12px;
    border: 1px solid #efefef;
    border-radius: 6px;
    height: calc(100vh - 400px - 131.332rpx); 
    font-size: 20px;
  }

  .btns {
    flex: 1;
    padding: 16px 16px 0 0;
    display: flex;
    justify-content: flex-end;
    gap: 16px;
  }

  .submitBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 108px;
    height: 48px;
    border-radius: 6px;
    background-color: #1890ff;
    color: #fff;
    font-size: 24px;
  }

</style>